﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .container {
            height: 100vh;
            width: 100vw;
            display: flex;
            align-items: center;
        }

        .stage {
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            color: #fafafa;
            width: 100%;
            padding: 20px;
            text-align: center;
            text-shadow: 1px 1px 4px #333;
        }

            .stage > h1 {
                font-weight: 100;
                margin: 0.5em 0;
                padding: 0;
                line-height: 1;
            }

            .stage > p {
                font-weight: 100;
                margin: 0.5em 0;
                padding: 0;
            }

        video {
            object-fit: cover;
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
    <script>
        window.addEventListener("message", (e) => {
            const { data } = e;
            if (data === "refresh") {
                window.location.reload(true);
            }
        });
    </script>
</head>
<body>
    <video src="sakura.ogv" autoplay muted loop></video>
    <div class="container">
        <div class="stage">
            <p>Served by</p>
            <h1>LocalFileResource</h1>
            <p>Change contents of this file and refresh</p>
        </div>
    </div>
</body>

</html>
